<template>
  <div class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 两个tbody互斥 有数据展示表格内容 没有数据展示内容为空 v-if和v-else -->
        <tbody v-if="list.length > 0">
          <tr v-for="(item, index) in list" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.subject }}</td>
            <!-- 不及格的分数(<60)才显示红色 不及格样式类名red -->
            <td :class="{ red: item.score < 60 }">{{ item.score }}</td>
            <td>{{ formatDate(item.date) }}</td>
            <!-- 阻止默认跳转 修饰符 -->
            <td><a href="#" @click.prevent="handleDel(item.id)">删除</a></td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>
        <!-- 长度为空的时候 不展示总分 => 有长度展示总分平均分 -->
        <tfoot v-if="list.length > 0">
          <tr>
            <td colspan="5">
              <span>总分：{{ sumScore }}</span>
              <span style="margin-left: 50px">平均分：{{ avgScore }}</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <!-- v-model有修饰符，这里我希望去空格 -->
          <input type="text" placeholder="请输入科目" v-model.trim="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <!-- 填写数字 修饰符 -->
          <input type="text" placeholder="请输入分数" v-model.number="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="handleAdd">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 1. 渲染列表数据
 * 2. 删除功能
 *    2-1 删除按钮点击事件 - 传参数？ 传id
 *    2-2 注册事件 处理数组删除某一项 filter
 *    2-3 body处理 总分平均分处理 删除数据删空了 处理空内容的结构
 * 3. 新增功能
 *    3-1 双向数据绑定
 *    3-2 保存提交按钮绑定事件 做数组push unshift 添加好数据视图更新
 *        校验 - 学科必须要填，分数0-100分
 *    3-3 清空表单 方便用户下次填写
 * 4. 格式化时间
 *    4-1 使用dayjs格式化 需要先装依赖
 *    4-2 封装格式化时间方法
 *    4-3 模板里面可以使用双大括号语法 调用methods里的方法 用于格式化时间
 */

/**
 * 持久化需求
 *  1. 本地存储 localStorage setItem getItem
 *  2. 数据变化就做持久化存储
 *      watch - 复杂数据类型
 *      完整的写法 deep:true
 *
 */
import dayjs from "dayjs";
export default {
  name: "ScoreCase",
  data() {
    return {
      // JSON.parse(localStorage.getItem("107-score-list")) ||
      list: JSON.parse(localStorage.getItem("107-score-list")) || [
        {
          id: 15,
          subject: "语文",
          score: 89,
          date: new Date("2022/06/07 10:00:00"),
        },
        {
          id: 27,
          subject: "数学",
          score: 100,
          date: new Date("2022/06/07 15:00:00"),
        },
        {
          id: 32,
          subject: "英语",
          score: 56,
          date: new Date("2022/06/08 10:00:00"),
        },
        {
          id: 41,
          subject: "物理",
          score: 76,
          date: new Date("2022/06/08 10:00:00"),
        },
      ],
      subject: "",
      score: "",
    };
  },
  methods: {
    handleDel(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    handleAdd() {
      // console.log(this);
      // console.log(this.subject, this.score);
      // 注意点： 如果有填的值 是允许填0的 那么你的判断逻辑 非空判断就一定要写成!==""
      if (
        this.subject !== "" &&
        this.score !== "" &&
        // this.score &&
        this.score >= 0 &&
        this.score <= 100
      ) {
        // 学科必填 分数必填 并且分数在0-100分可以保存
        // 数组 添加一项 往前
        this.list.unshift({
          id: +new Date(),
          subject: this.subject,
          score: this.score,
          date: new Date(),
        });
        // 表单清空操作
        this.subject = "";
        this.score = "";
      } else {
        alert("你填写的信息有误");
      }
    },
    formatDate(date) {
      return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  computed: {
    sumScore() {
      // reduce prev 累加的结果 item是数组里的每一项 这里的例子每一项是对象
      // 所以累加的值 +item.score
      // 又由于初始值如果不写就默认是数组的第一项（在这个例子中是对象），所以要指定初始值是0
      return this.list.reduce((prev, item) => prev + item.score, 0);
    },
    avgScore() {
      // 平均分 总分 / 数组长度
      return (this.sumScore / this.list.length).toFixed(2);
    },
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(val) {
        // console.log(JSON.stringify(val));
        localStorage.setItem("107-score-list", JSON.stringify(val));
      },
    },
  },
};
</script>

<style lang="less">
.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  .table {
    flex: 4;
    table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      th {
        background: #f5f5f5;
      }
      tr:hover td {
        background: #f5f5f5;
      }
      td,
      th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
        &.red {
          color: red;
        }
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .form {
    flex: 1;
    padding: 20px;
    .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
}
</style>